<template>
  <view class="container">
    <view class="title"> 选择账单下载用途 </view>
    <view class="choose_box">
      <view class="item1" @tap="toDown(1)">
        <uni-icons type="calendar" size="28" color="#36cc7f"></uni-icons>
        <view class="right">
          <view class="type_title">用于个人对账</view>
          <view class="desc"
            >可下载对应的时间段内的账单流水文件
            (Excel格式),仅限个人对账使用</view
          >
          <uni-icons class="toright" type="forward" size="16"></uni-icons>
        </view>
      </view>
      <view class="item1" @tap="toDown(2)">
        <uni-icons type="download" size="28" color="#36cc7f"></uni-icons>
        <view class="right">
          <view class="type_title">用做证明材料</view>
          <view class="desc"
            >可下载加盖公章的交易明细证明(PDF格式),常作为出国签证,银行贷款.财务纠纷,诉讼等事务的证明材料</view
          >
          <uni-icons class="toright" type="forward" size="16"></uni-icons>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    toDown(type) {
      uni.navigateTo({
        url: `/pages/down_bill/index?type=${type}`,
      });
    },
  },
};
</script>

<style scoped lang="scss">
.container {
  letter-spacing: 1px; /* 设置文字间距为2像素 */
  .title {
    height: 160px;
    line-height: 160px;
    color: #000;
    font-weight: 500;
    font-size: 22px;
    width: 100%;
    text-align: center;
  }
  .choose_box {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
    width: 93%;
    border-top: 1px solid #e0e3ea;

    .item1 {
      display: flex;
      justify-content: start;
      align-items: flex-start;
      position: relative;
      padding: 20px 0;
      width: 100%;
      border-bottom: 1px solid #e0e3ea;
      .toright {
        position: absolute;
        top: 61px;
        right: 10px;
      }
      .right {
        margin-left: 10px;
        .type_title {
          color: #000;
          font-weight: 400;
          font-size: 18px;
        }
        .desc {
          margin-top: 10px;
          color: #999;
          font-size: 16px;
          text-align: left;
          width: 256px;
        }
      }
    }
  }
}
</style>
